<template>
  <el-dialog :visible.sync="visible" title="取消分配" :close-on-click-modal="false" width="60vw" @opened="handleOpened" @closed="handleClosed">
    <div>
      <el-alert type="warning">
        <span slot="title">
          取消分配后，所选
          <span style="color:red;">{{ selectedRows.length }}</span>
          条数据将取消作为客户经理当月任务，是否确认?
        </span>
      </el-alert>
      <el-form ref="form" class="form-wrap" :model="formData" :rules="formRules" label-width="120px">
        <el-form-item prop="unAllocationReason" label="取消分配原因">
          <el-input v-model="formData.unAllocationReason" type="textarea" :autosize="{minRows: 3}" maxlength="1024" show-word-limit clearable />
        </el-form-item>
      </el-form>
    </div>
    <div class="btn-end">
      <c-button type="default" @click="handleCancel">取消</c-button>
      <c-button type="primary" @click="handleConfirm">确定</c-button>
    </div>
  </el-dialog>
</template>
<script>
import { undistributedTask } from '@/api/channelTask2/storeUpgradeTask'
export default {
  name: 'UndDistribution',
  props: {
  },
  data() {
    return {
      visible: false,
      formData: {
        unAllocationReason: ''
      },
      formRules: {
        unAllocationReason: [{ required: true, message: '请输入取消分配原因', trigger: 'change' }]
      },
      selectedRows: []
    }
  },
  methods: {
    openDialog(selectedRows) {
      this.selectedRows = selectedRows
      this.visible = true
    },
    handleOpened() {
    },
    handleClosed() {
      this.selectedRows = []
      this.$refs.form.resetFields()
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    handleCancel() {
      this.visible = false
    },
    handleConfirm() {
      return this.$refs.form.validate().then(() => {
        const data = {
          ids: this.selectedRows.map(e => e.id),
          ...this.formData
        }
        return undistributedTask(data).then(res => {
          this.$message.success('操作成功!')
          this.visible = false
          this.$emit('on-success')
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.form-wrap{
  margin-top: 20px;
}
</style>
